var imgs = [
    "./img/Wallpaper1.jpg",
    "./img/Wallpaper2.jpg",
    "./img/Wallpaper3.jpg",
    "./img/Wallpaper4.jpg",
    "./img/Wallpaper5.jpg"
];

var warpBox = document.getElementsByClassName('warps')[0];
var dotsBox = document.getElementsByClassName('dots')[0];
var container = document.getElementsByClassName('container')[0];


/* 初始化 */
var index = 0;

function loadDom() {
    imgs.length
    warpBox.style.width = (imgs.length + 1) + '00%';
    imgs.forEach(ele => {
        var imgItem = document.createElement("img");
        imgItem.src = ele;
        var dotItem = document.createElement('li');

        warpBox.appendChild(imgItem);
        dotsBox.appendChild(dotItem);
    })
    var lastDom = document.createElement('img');
    lastDom.src = imgs[0];
    warpBox.appendChild(lastDom);
    dotsStatus();

}
loadDom();

function dotsStatus() {
    var active = document.querySelector('.active');
    console.log(active);
    if (active) {
        active.classList = '';
    }
    dotsBox.children[index].className = "active";
}




/* 交互 */
var isPlaying = false;

function moveTo(newIndex, onend) {
    /**
     * creatAnimation函数
     * 传入参数是一个对象
     * {
     * from：动画开始。。。
     * }
     * @param {*} param0 
     */
    if (isPlaying || newIndex === index) {
        return; // 有动画进行 或 切换目标和当前一致，不做任何事情
    }
    isPlaying = true;
    var from = warpBox.style.marginLeft || 0;
    var to = -newIndex * container.clientWidth;
    createAnimation({
        from: from,
        to: to,
        totalMS: 1000,
        onmove: function (n) { //动画开始时做什么,n是from
            warpBox.style.marginLeft = n + 'px';
        },
        onend: function () { //动画结束时干什么
            isPlaying = false;
            onend && onend();
        }
    });
    index = newIndex;
    dotsStatus();
}